/*
 * @Author: xiawei 1243162387@qq.com
 * @Date: 2024-04-18 14:23:40
 * @LastEditors: xiawei 1243162387@qq.com
 * @LastEditTime: 2024-05-08 15:27:38
 */
import { reactive, ref, onMounted } from 'vue';

// 提供表格初始化相关配置，以便于不同的模块实现自己的不同操作
//    type: string, // 操作类型
// data: any, // 回调给业务组件使用的数据
export type OperationFun = (type: string, data: any) => void;
export type TableComfig = {
    // 获取数据api
    tableApi: any,
    // 操作列表配置方法
    operation?: OperationFun;
    // 表格选中数据
    dataSelect?: any

}
//提供最基础的表格配置数据如：分页数据，表格获取数据，以及数据的加载方便复用
const useTable = (config: TableComfig) => {
    // 定义表格分页 数据
    const page = reactive({
        currentPage: 1,
        total: 0,
        pageSize: 50,
        pageSizes: [ 50, 100, 200]
    });
    // 定义表格数据
    const tableData = ref([]);
    // 控制表格的loading
    const loading = ref<boolean>(false);
    // 表格的实例
    const CustomTableRef = ref();
    // 表头筛选数据
    const filters = ref([]);
    // 表格排序字段
    const sort = ref({});
    // 表格选中数据
    let selectData = config.dataSelect || [];
    // 定义表格获取数据
    const loadTableData = async () => {
        loading.value = true;
        const params = getTableParams();
        const { result } = await config.tableApi(params);
        tableData.value = result.data;
        page.total = result.total;
        loading.value = false;
        CustomTableRef.value?.toggleRowSelection(
            selectData
        );
    }
    // 获取表格查询的参数
    const getTableParams = () => {
        // 获取表格筛选参数
        const _filters = Object.create(null);
        filters.value.forEach((item: any) => {
            _filters[item.prop] = item.value
        })
        // 分页数据
        _filters['currentPage'] = page.currentPage;
        _filters['pageSize'] = page.pageSize;
        return {
            ..._filters,
            sort: sort.value
        }
    }
    // 操作列表事件
    const handleOperation = (type: string, data: any) => {
        if (config.operation) {
            config.operation(type, data)
        }
    }
    // 表头筛选
    const filterChange = (_filters: any) => {
        filters.value = _filters;
        page.currentPage = 1;
        loadTableData();
    }
    // 表头排序
    const sortChange = (_sort: any) => {
        sort.value = _sort;
        loadTableData()
    }
    // 表格选择事件回调
    const selectionChange = (data: any) => {
        selectData = data;
    }
    // 表格分页大小发生变化
    const sizeChange = (_size: number) => {
        page.pageSize = _size;
        loadTableData();
    }
    // 当前页码发生变化
    const currentChange = (_page: number) => {
        page.currentPage = _page;
        loadTableData();
    }
    // 加载表格数据
    onMounted(() => {
        loadTableData();
    })
    return {
        page,
        CustomTableRef,
        loading,
        tableData,
        handleOperation,
        filterChange,
        sortChange,
        selectionChange,
        sizeChange,
        currentChange,
        loadTableData
    }
}

export default useTable